import 'dart:ui';

import 'package:easy_read_comic/controller/comic/read_controller.dart';
import 'package:easy_read_comic/widgets/auto_image_widget.dart';
import 'package:easy_read_comic/widgets/chapter_brightness_widget.dart';
import 'package:easy_read_comic/widgets/chapter_menu_list_widget.dart';
import 'package:easy_read_comic/widgets/chapter_setting_widget.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ReadView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ReadView();
}

class _ReadView extends State<ReadView> {
  final ScrollController _scrollController = ScrollController();

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      builder: (controller) {
        return Scaffold(
          key: _scaffoldKey,
          drawer: Drawer(
            child: Padding(
              padding: EdgeInsets.all(10),
              child: EasyRefresh(
                onLoad: () {
                  controller.getChapterList();
                },
                onRefresh: () {
                  controller.resetGetChapterList();
                },
                child: ListView(
                  children: controller.chapterList
                      .map(
                        (e) => ListTile(
                          onTap: () {
                            if (controller.chapter.Id != e.Id) {
                              controller.resetLoad(e.ComicId, e.Id);
                            }
                          },
                          title: Text(
                            e.Title,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                          subtitle: Text(
                            e.Intro,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                          trailing: controller.chapter.Id == e.Id
                              ? null
                              : Icon(Icons.chevron_right),
                        ),
                      )
                      .toList(),
                ),
              ),
            ),
          ),
          body: Container(
            color: Colors.black,
            child: Stack(
              children: [
                Listener(
                  onPointerDown: controller.onPointerDown,
                  onPointerMove: controller.onPointerMove,
                  onPointerUp: controller.onPointerUp,
                  child: Container(
                    child: SingleChildScrollView(
                      controller: _scrollController,
                      physics: NeverScrollableScrollPhysics(),
                      scrollDirection: controller.readPhotoMethod,
                      child: Flex(
                        direction: controller.readPhotoMethod,
                        children: controller.loadList
                            .map(
                              (e) => Container(
                                child: AutoImage.buildImage(
                                  e,
                                  loadingColor: Colors.white,
                                  fit: controller.photoBoxFit,
                                ),
                                height: Get.height,
                                width: Get.width,
                              ),
                            )
                            .toList(),
                      ),
                    ),
                    width: Get.width,
                    height: Get.height,
                  ),
                ),
                Visibility(
                  child: Positioned(
                    child: Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Container(
                            child: Row(
                              children: [
                                IconButton(
                                  onPressed: () => Get.back(),
                                  icon: Icon(
                                    Icons.keyboard_arrow_left,
                                    size: 30,
                                  ),
                                ),
                                Text(
                                  controller.chapter.Title.toString(),
                                ),
                              ],
                            ),
                          ),
                          Container(
                            child: Row(
                              children: [
                                IconButton(
                                  onPressed: () {
                                    showModalBottomSheet(
                                      context: context,
                                      builder: (BuildContext context) {
                                        return ChapterSettingWidget(controller);
                                      },
                                    );
                                  },
                                  icon: Icon(
                                    Icons.settings,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                      color: Colors.white,
                      height: 100,
                      width: Get.width,
                    ),
                    top: 0,
                  ),
                  visible: controller.showTool,
                ),
                Visibility(
                  child: Positioned(
                    child: Container(
                      height: 110,
                      color: Colors.white,
                      width: Get.width,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Slider(
                            activeColor: Theme.of(context).primaryColor,
                            min: 0,
                            max: controller.MaxSlider > 0
                                ? (controller.MaxSlider - 1).toDouble()
                                : 0,
                            value: controller.sliderValue,
                            onChanged: (value) => controller.moveWindow(
                              value > controller.sliderValue,
                              isSlider: true,
                            ),
                          ),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              IconButton(
                                onPressed: () {
                                  _scaffoldKey.currentState?.openDrawer();
                                },
                                icon: Icon(
                                  Icons.menu,
                                  color: Theme.of(context).primaryColor,
                                ),
                              ),
                              if (!kIsWeb)
                                IconButton(
                                  onPressed: () {
                                    showModalBottomSheet(
                                      context: context,
                                      isScrollControlled: true,
                                      builder: (BuildContext context) {
                                        return ChapterBrightnessWidget(
                                          controller,
                                        );
                                      },
                                    );
                                  },
                                  icon: Icon(
                                    Icons.wb_sunny,
                                    color: Theme.of(context).primaryColor,
                                  ),
                                ),
                            ],
                          ),
                        ],
                      ),
                    ),
                    bottom: 0,
                  ),
                  visible: controller.showTool,
                ),
              ],
            ),
            width: Get.width,
            height: Get.height,
          ),
        );
      },
      init: ReadController(_scrollController),
    );
  }
}
